// Api

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin api {
  display: block;
  > .#{$prefix}-selector {
    > span {
      &:first-child {
        font-size: 1.25rem;
      }
      &:last-child {
        padding: 0.125rem;
        margin-left: 0.5rem;
        border: 0.0625rem solid $--x-primary;
        color: $--x-primary;
        font-size: 0.825rem;
        border-radius: $--x-border-radius;
      }
    }
  }
  > .#{$prefix}-interface {
    margin-top: 1rem;
    > tr {
      > td {
        &:nth-child(1) {
          width: 20%;
          > span {
            color: #690;
          }
        }
        &:nth-child(3) {
          color: #07a;
          width: 22%;
        }
        &:nth-child(4) {
          color: #dd4a68;
          width: 16%;
        }
      }
    }
  }
  > .#{$prefix}-type {
    > tr {
      > td {
        &:nth-child(1) {
          color: #07a;
          width: 20%;
        }
        &:nth-child(3) {
          color: #dd4a68;
          width: 35%;
        }
      }
    }
  }
  table {
    width: 100%;
    background: $--x-background;
    border-collapse: collapse;
    border: $--x-border-base;
    tr > th,
    tr > td {
      border-bottom: $--x-border-base;
      text-align: left;
      padding: 0.5rem 1rem;
    }
    tr {
      &:last-child {
        > th,
        > td {
          border-width: 0px;
        }
      }
      th {
        white-space: nowrap;
        color: $--x-text;
      }
    }
  }
}
